<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个性导航</title>
    <style>
        *{margin: 0;padding: 0;border: 0;list-style: none;}
        html,body,ul{height: 100%;}
        ul li{  width: 100%;  height: 100%;  background: pink;  font-size: 120px;  }
        ol{  border: 1px solid #000;  position: fixed;  left: 120px;  top:0;  width: 100px;  border-bottom: none;  background: #ccc;  }
        ol li{  text-align: center;  height: 80px;  line-height: 80px;  border-bottom: 1px solid #000;  }
        .cur{ background: yellow; }
    </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            var colors = ['green','purple','yellow','pink','blue'];
            $('ul li').each(function(index,element){
                $(element).css({background:colors[index]})
            });

            var winH = $(window).height();
            $('ol li').click(function(){
                var y = $(this).index() * winH;
                $('html,body').stop().animate({scrollTop:y});
                $(this).addClass('cur').siblings().removeClass('cur');
            })
            var timer = null;
            $(window).scroll(function(){
                clearTimeout(timer);
                setTimeout(function(){
                    var winT =  $(window).scrollTop();
    //                var index = (winT + winH/2) / winH;
                    var index = parseInt(winT/winH);
                    $('ol li').eq(index).addClass('cur').siblings().removeClass('cur');
                },500)
            })
        });
    </script>
</head>
<body>
<ul>
    <li>首页</li>
    <li>关注</li>
    <li>动态</li>
    <li>风格</li>
    <li>作品</li>
</ul>
<ol>
    <li class="cur">首页</li>
    <li>关注</li>
    <li>动态</li>
    <li>风格</li>
    <li>作品</li>
</ol>
</body>
</html>